import 'package:flutter/material.dart';
import '../models/user.dart';

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final _formKey = GlobalKey<FormState>();
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();
  final _phoneController = TextEditingController();

  String? username;
  String? userpassword;
  String? userphone;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Container(
          child: Scaffold(
              appBar: AppBar(
                title: const Text("注册"),
              ),
              body: Container(
                padding: const EdgeInsets.all(55),
                child: Column(
                  children: <Widget>[
                    Form(
                      key: _formKey,
                      child: Column(
                        children: <Widget>[
                          TextFormField(
                            controller: _usernameController,
                            autocorrect: false,

                            // 设置输入模式为用户名
                            keyboardType: TextInputType.name,

                            // 装饰
                            decoration: InputDecoration(
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: 20, vertical: 10),
                                hintText: '请输入用户名',
                                border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(5))),

                            // 验证用户名
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return '请输入用户名';
                              }

                              // 用户名中不能包含空格
                              if (value.contains(' ')) {
                                return '用户名中不能包含空格';
                              }

                              // 用户名长度不能小于6
                              if (value.length < 6) {
                                return '用户名长度不能小于6';
                              }

                              // 用户名长度不能大于16
                              if (value.length > 16) {
                                return '用户名长度不能大于16';
                              }

                              // 用户名只能包含字母和数字
                              if (!RegExp(r'^[a-zA-Z0-9]+$').hasMatch(value)) {
                                return '用户名只能包含字母和数字';
                              }

                              return null;
                            },
                          ),

                          // 两个输入框之间间隔20
                          const SizedBox(height: 20),

                          // 手机号输入框
                          // 输入手机号
                          TextFormField(
                            controller: _phoneController,
                            // 是否自动对焦
                            autofocus: false,
                            // 输入模式设置为手机号
                            keyboardType: TextInputType.phone,
                            // 装饰
                            decoration: InputDecoration(
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: 20, vertical: 10),
                                hintText: '请输入手机号',
                                border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(5))),
                            // 输入框校验
                            validator: (value) {
                              RegExp reg = new RegExp(r'^\d{11}$');
                              if (!reg.hasMatch(value!)) {
                                return '请输入11位手机号码';
                              }
                              return null;
                            },
                          ),

                          // 两个输入框之间间隔20
                          const SizedBox(height: 20),

                          // 密码输入框
                          TextFormField(
                            controller: _passwordController,
                            autocorrect: false,

                            // 设置输入模式为密码
                            keyboardType: TextInputType.visiblePassword,

                            // 装饰
                            decoration: InputDecoration(
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: 20, vertical: 10),
                                hintText: '请输入密码',
                                border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(5))),
                            obscureText: true,

                            // 验证密码
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return '请输入密码';
                              }

                              // 密码长度不能小于6
                              if (value.length < 6) {
                                return '密码长度不能小于6';
                              }

                              // 密码长度不能大于16
                              if (value.length > 16) {
                                return '密码长度不能大于16';
                              }

                              // 密码只能包含字母和数字
                              if (!RegExp(r'^[a-zA-Z0-9]+$').hasMatch(value)) {
                                return '密码只能包含字母和数字';
                              }

                              return null;
                            },
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(height: 20),
                    Container(
                      height: 44,
                      width: MediaQuery.of(context).size.width - 110,
                      decoration:
                          BoxDecoration(borderRadius: BorderRadius.circular(5)),
                      child: ElevatedButton(
                        child: const Text(
                          '登录',
                          style: TextStyle(
                            fontSize: 20,
                          ),
                        ),
                        onPressed: () {
                          if (_formKey.currentState!.validate()) {
                            _formKey.currentState!.save();
                            _register();
                          }
                        },
                      ),
                    ),
                  ],
                ),
              )),
        ));
  }

  void _register() async {
    // final newUser = User(username: _username, password: _password);
    // await Utils.saveUser(newUser);

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('注册成功'),
          content: const Text('已经注册成功，请登录'),
          actions: [
            TextButton(
              child: const Text('好的'),
              onPressed: () {
                userphone = _phoneController.text;
                userpassword = _passwordController.text;
                userphone = _phoneController.text;
                User _summitUser =
                    User(userpassword: userpassword, userphone: userphone);
                _summitUser.username = username;

                if (_formKey.currentState!.validate()) {
                  Navigator.of(context)
                      .pushNamed('/login', arguments: _summitUser);
                }
              },
            ),
          ],
        );
      },
    );
  }
}
